<template>
  <div class="body_box">
    <!--头部-->
    <div class="head">
      <div class="head_left">数据看板</div>
      <h1>可视化大数据平台</h1>
      <div class="head_right">{{ formattedDate.date }} {{ formattedDate.time }}</div>
    </div>
    <!--内容主体-->
    <div class="main_box">
      <!--主体左边-->
      <div class="main_left">
        <!--上-->
        <div class="left_top">
          <div class="icon">
            <img src="@/assets/setUp.png" alt="">
          </div>
          <div class="text">
            卷取2设定长度
          </div>
          <div class="num">
            135
          </div>
        </div>
        <!--下-->
        <titleBox title="左侧" />
        <div class="left_contre">

        </div>
      </div>
      <!--主体中间-->
      <div class="main_centre"></div>
      <!--主体右边-->
      <div class="main_right">
        <!--上-->
        <div class="right_top">
          <div class="num">
            135
          </div>
          <div class="text">
            卷取2设定长度
          </div>
          <div class="icon">
            <img src="@/assets/setUp.png" alt="">
          </div>
        </div>
        <!--下-->
        <titleBox title="右侧" />
        <div class="right_contre">

        </div>
      </div>
    </div>
    <!--底部-->
    <div class="footer_box">
      <div class="left1"></div>
      <div class="btn_box">
        <div class="btn" :class="active == index ?  'active' : '' " v-for="(val,index) in btnList" @click="activeClick(index)">
          {{ val }}</div>
      </div>
      <div class="right1"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import titleBox from "@/components/title-box.vue";
import {computed, onBeforeUnmount, onMounted, ref} from "vue";

const active = ref<any>('')
const btnList = ref<Array<any>>([
    '状态','张力画面','急停指示','生产产量','参数设定','卷取配重检点','张力设定',
])

const activeClick = (val:any) => {
  active.value = val;
}

// 右上时间
let timer: any = null
const currentTime = ref(new Date()) //当前时间
const formattedDate = computed(() => {
  const year = currentTime.value.getFullYear()
  const month = String(currentTime.value.getMonth() + 1).padStart(2, '0')
  const day = String(currentTime.value.getDate()).padStart(2, '0')
  const hours = String(currentTime.value.getHours()).padStart(2, '0')
  const minutes = String(currentTime.value.getMinutes()).padStart(2, '0')
  const seconds = String(currentTime.value.getSeconds()).padStart(2, '0')

  return { date: `${year}/${month}/${day}`, time: `${hours}:${minutes}:${seconds}` }
})


onMounted(() => {
  timer = setInterval(() => {
    currentTime.value = new Date()
  }, 1000)
})
onBeforeUnmount(() => {
  clearInterval(timer)
})
</script>

<style lang="scss" scoped>
.body_box{
  width: 100%;
  height: 100%;
  background: linear-gradient(25deg, #0f2249, #182e5a 20%, #0f2249 40%, #182e5a 60%, #0f2249 80%, #182e5a 100%);
}
//头部样式
.head {
  height: 80px;
  background: url(@/assets/head_bg.png) no-repeat center center;
  background-size: 100% 100%;
  position: relative;
  display: flex;
}
.head_left , .head_right {
  width: 20%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #bde4ff;
}
.head h1 {
  height: 100%;
  width: 100%;
  color: #bde4ff;
  text-align: center;
  font-size: 28px;
  line-height: 80px;
  letter-spacing: 10px;
}
//主体样式
.main_box {
  width: 100%;
  height: calc(100vh - 160px);
  display: flex;
  flex-wrap: wrap;
  padding: 0 15px;
  box-sizing: border-box;
}
//主体左侧样式
.main_left {
  width: 22%;
  height: 100%;
}
.left_top {
  width: 100%;
  height: 10%;
  display: flex;
  align-items: center;
  background-color: #0f2249;
  margin-bottom: 20px;
  padding: 0 15px;
  box-sizing: border-box;
  border-radius:  5px;
  border: 1px solid #254b9a;
  .icon {
    width: 30px;
    height: 30px;
    img {
      width: 100%;
      height: 100%;
      animation: rotate 5s infinite linear;
    }
  }
  .text {
    width: 65%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #bde4ff;
    letter-spacing: 8px;
    font-size: 26px;
    font-weight: bold;
  }
  .num {
    flex: 1;
    height: 50px;
    line-height: 50px;
    border-radius: 10px;
    background-image: linear-gradient(180deg, #1441ad 0%, #345a8f 100%);
    color: #bde4ff;
    font-size: 32px;
    text-align: center;
    font-weight: bold;
    letter-spacing: 5px;
  }
}
.left_contre {
  height: calc(90% - 52px);
  width: 100%;
  background-color: #0f2249;
  border: 1px solid #254b9a;
}
//主题中部样式
.main_centre {
  width: 56%;
  height: 90%;
}
//主体右侧样式
.main_right {
  width: 22%;
  height: 100%;
}
.right_top {
  width: 100%;
  height: 10%;
  display: flex;
  align-items: center;
  background-color: #0f2249;
  margin-bottom: 20px;
  padding: 0 15px;
  box-sizing: border-box;
  border-radius:  5px;
  border: 1px solid #254b9a;
  .icon {
    width: 30px;
    height: 30px;
    img {
      width: 100%;
      height: 100%;
      animation: rotate 5s infinite linear;
    }
  }
  .text {
    width: 65%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #bde4ff;
    letter-spacing: 8px;
    font-size: 26px;
    font-weight: bold;
  }
  .num {
    flex: 1;
    height: 50px;
    line-height: 50px;
    border-radius: 10px;
    background-image: linear-gradient(180deg, #1441ad 0%, #345a8f 100%);
    color: #bde4ff;
    font-size: 32px;
    text-align: center;
    font-weight: bold;
    letter-spacing: 5px;
  }
}
.right_contre{
  height: calc(90% - 52px);
  width: 100%;
  background-color: #0f2249;
  border: 1px solid #254b9a;
}
//底部样式
.footer_box {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  //background: #FFFFFF;
}
.btn_box{
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: rgba(74, 74, 74, 0.3);
  height: 100%;
  width: 100%;
}
.btn {
  width: 120px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  cursor: pointer;
  color: #6dc2fd;
  box-shadow: 0 0 0 0 transparent inset;
  transition: all .3s linear;
}
.active {
  color: #fff;
  box-shadow: 0px -15px 0px -10px #6dc2fd inset;
}
.left1 {
  border-left: 120px solid transparent;
  border-bottom: 80px solid rgba(74, 74, 74, 0.3);
}
.right1 {
  border-right: 120px solid transparent;
  border-bottom: 80px solid rgba(74, 74, 74, 0.3);
}

@keyframes icon {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>